<template>
    <div id="box">
        <!--导航条-->
        <div id="header">
            <Navbar>
                <span @click="back" slot="left"><img src="static/icons/blueB.png" id="back"></span>
                <span slot="center" class="nav-size">会员注册</span>
                <span slot="right" class="nav-size">
                    <router-link to="/login/abc">登录</router-link>
                </span>
            </Navbar>
        </div>
        <!--登录面板-->
        <div id="login-box">
            <div id="mail" class="margin">
                <span class="tips" v-show="nameTips">用户名已经存在！</span>
                <img src="static/icons/account.png">
                <input type="text" placeholder="用户名" v-model="registParams.name" @input="checkName">
            </div>
            <div id="psw" class="margin">
                <img src="static/icons/psw.png">
                <input 
                    type="password" placeholder="设置密码 3-6位数字字母" v-model="registParams.psw"
                    pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,6}$"
                   
                >
            </div>
            <div id="country" class="margin">
                <img src="static/icons/location.png">
                <!--<input type="text" placeholder="选择国家或地区" v-model="registParams.country" required>-->
                <select v-model="registParams.country" >
                    <option v-for="i in country" :value="i">{{i}}</option>
                </select>
            </div>
            <div id="tel" class="margin">
                <span class="tips" v-show="telTips">手机已经被注册！</span>
                <img src="static/icons/tel.png">
                <input
                     type="text" placeholder="常用手机号码" v-model="registParams.tel" @input="checkTel"
                >
            </div>
        </div>
        <button @click="registClick">注册</button>

        <!--<Picker :data="country" :fixed-columns="2" :columns="2"></Picker>-->
        <!--<Success v-show="isShow">注册成功</Success>-->
        <img src="static/img/br_tu.png" id="img-bottom">
    </div>
</template>
<script>

import Navbar from '../components/Navbar.vue';
import {Divider,Picker} from "vux";
import {mapState} from "vuex";
import Success from "../components/Success.vue"
export default {
    data:function(){
        return {
            registParams:{},
            timer:null,
            isShow:false
        }
    },
    computed:{
        ...mapState({
            nameTips:state=>state.user.nameTips,
            telTips:state=>state.user.telTips,
            country:state=>state.user.country
        })
    },
    components:{
        Navbar,
        Divider,
        Picker,
        Success,
    },
    methods:{
        back(){
            history.back();
        },
        // 注册
        registClick(){
            console.dir(this.registParams)
            this.isShow=true;
            this.$store.dispatch("registRequest",this.registParams)
            .then(data=>{
                // setTimeout(()=> {
                //     this.isShow = false;
                // }, 1000);
                this.$router.push({path:"/login/abc"})
            })
        },
        // 检查用户名是否存在
        checkName(){
            if(this.timer){
                clearTimeout(this.timer);
                this.timer=null
            }
            this.timer =setTimeout(function(){
                if(this.registParams.name){
                    this.$store.dispatch("checkRequset",this.registParams.name)
                }
                this.timer=null;
            }.bind(this),700); 
        },
        // 检查手机号是否被注册
        checkTel(){
            if(this.timer){
                clearTimeout(this.timer);
                this.timer=null
            }
            this.timer =setTimeout(function(){
                if(this.registParams.tel){
                    this.$store.dispatch("checkTelRequset",this.registParams.tel)        
                }
                this.timer=null;
            }.bind(this),700);
        }
    },
    mounted:function(){
        this.$store.dispatch("countryRequest")
    }
}
</script>

<style lang='css' scoped>
    #back{
        width:30px;
        height:30px;
        margin-top:12px;
    }
    #box{
        width: 100vw;
        height: 100vh;
        background-image: url(../../static/img/bg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }
    #header{
        height: 110px;
        width: 100vw;
        /*border: 1px solid black;*/
        background-color: #c7ddea;
    }
    .nav-size{
        font-size: 18px;
        color: #0894ec;
    }
    #img-bottom{
        position: absolute;
        left:0;
        bottom: 0;
        width: 100vw;
    }
    #login-box{
        /*border: 1px solid black;*/
        padding: 10px;
        background-color: #d6e6f0;
    }
    #login-box img{
        /*height: 50px;*/
        width: 25px;
    }
    #login-box input,select{
        border: 1px solid #cadce6;
        border-left: none;
        border-right: none;
        border-top: none;
        background-color: transparent;
        width: 75vw;
        height: 5vh;
    }
    .margin{
        margin:10px;
    }
    #margin{
        margin:5px;
    }
    button{
        background-color: #2997d9;
        width: 90vw;
        height: 40px;
        border: 1px solid #2997d9;
        border-radius: 12px;
        margin:10px;
        color: #fff;
        font-size: 15px
    }
    a{
        text-decoration: none;
        color: #0894ec;
    }
    #mail,#tel{
        
        position: relative
    }
    .tips{
        position: absolute;
        right:10px;
        bottom: 10px;
        font-size: 10px;
        color: red;
        /*border: 1px solid  red;*/
    }

</style>